<template>
  <div>
    <div>
        <div>
          <span style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">模板名称：</span>
          <el-input v-model="queryFmbmc" style="width: 200px; margin-right: 10px" placeholder="请输入模板名称"></el-input>

          <span style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">签名：</span>
          <el-select class="page" v-model="LXvalue" placeholder="请选择">
            <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

          <span style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信内容：</span>
          <el-input v-model="queryFnr" style="width: 200px; margin-right: 10px" placeholder="请输入短信内容"></el-input>

          <span style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">状态：</span>
          <el-select class="page" v-model="DRvalue" placeholder="请选择">
            <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

          <span  style=" margin-right: 8px; font-size: 14px;">模板类型：</span>
          <el-select  class="page" v-model="FSvalue" placeholder="请选择">
            <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>

          <span  style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信类型：</span>

          <el-select  class="page" v-model="DXvalue" placeholder="请选择">
            <el-option
                v-for="item in options5"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>


        </div>

      <div>
        <el-button type="primary" @click="fetchDataByFmbmc">查询</el-button>
        <el-button @mouseover="showButtons = true">+ 创建短信模板</el-button>
        <div v-if="showButtons" @mouseleave="showButtons = false">
          <el-button @click="openForm('normal')">普通短信模板</el-button>
          <el-button @click="openForm('link')">智能短链模板</el-button>
          <el-button @click="openForm('media')">多媒体短信模板</el-button>
        </div>



        <el-dialog v-if="formType === 'normal'" v-model="showForm">
        <!-- 表单1的内容 -->
        <div>
          <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信模板名称：</span>
          <el-input v-model="moBanName" style="width: 200px; margin-right: 10px" placeholder="请输入短信模板名称"></el-input>
          <br><br>
          <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信类型：</span>
          <el-radio-group v-model="selectedOption">
            <el-radio :label="'option1'">挂机短信</el-radio>
            <el-radio :label="'option2'">群发短信</el-radio>
            <el-radio :label="'option3'">第三方挂机短信</el-radio>
          </el-radio-group>
          <br><br>
          <div> *请按照实际场景选择短信类型，选择了不合适的类型会导致短信发送异常</div>
          <br><br>
          <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信签名：</span>
          <el-select
              v-if="selectedOption !== 'option3'"
              v-model="selectedValue"
              :placeholder="inputPlaceholder"
          >
            <el-option
                v-for="item in currentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-input
              v-else
              v-model="selectedValue"
              :placeholder="inputPlaceholder"
          >
          </el-input>
          <br>
          <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信文案：</span>
          <div style="margin: 20px 0;"></div>
          <el-input
              type="texarea"
              placeholder="请输入内容"
              v-model="texarea"
              show-word-limit>
          </el-input>
          <br><br>
          <div style="text-align: right;">
            <el-button @click="showForm = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>

        </div>
      </el-dialog>

        <el-dialog v-if="formType === 'link'" v-model="showForm">
        <!-- 表单2的内容 -->
        <el-steps :active="1" align-center>
          <el-step title="设定短信内容" active="1"/>
          <el-step title="设定短链内容"/>
        </el-steps>
        <br><br>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">选择短链地址：</span>
        <el-select  class="page" v-model="DLvalue" placeholder="请选择">
          <el-option
              v-for="item in optionsDL1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <br><br>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信模板名称：</span>
        <el-input v-model="moBanName1" style="width: 200px; margin-right: 10px" placeholder="请输入短信模板名称"></el-input>
        <br><br>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信类型：</span>
        <el-radio-group v-model="options5">
          <el-radio label="3">挂机短信</el-radio>
          <el-radio label="4">群发短信</el-radio>
        </el-radio-group>    <br><br>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信签名：</span>

        <el-select  class="page" v-model="QMvalue1" placeholder="请选择">
          <el-option
              v-for="item in optionsQM"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>    <br><br>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信文案：</span>
        <el-input
            type="texarea"
            placeholder="请输入内容"
            v-model="texarea1"
            maxlength="200"
            show-word-limit
        ></el-input>
        <br><br><br>
        <el-popover ref="variablePopover" placement="bottom" width="200" trigger="click">
          <el-input
              v-model="searchTerm"
              placeholder="搜索..."
              size="small"
          ></el-input>

          <el-scrollbar style="height: 200px;">
            <div v-for="(item, index) in filteredVariables" :key="index">
              <el-button
                  type="text"
                  @click="addVariableTotexarea(item)"
              >
                {{ item }}
              </el-button>
            </div>
          </el-scrollbar>

          <el-button slot="reference" type="primary">添加变量</el-button>
        </el-popover>

        <el-button  type="primary" @click="addShortLink">添加短链</el-button>
        <br>
        <div v-if="previewContent">
          <strong>预览:</strong>
          <div>{{ previewContent}}退订回T</div>
        </div>
        <el-divider />
        <div style="text-align: right;">
          <el-button @click="showForm = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </el-dialog>


        <el-dialog v-if="formType === 'media'" v-model="showForm">
        <!-- 表单3的内容 -->
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信模板名称：</span>
        <el-input v-model="moBanName2" style="width: 200px; margin-right: 10px" placeholder="请输入短信模板名称"></el-input>     <br><br>

        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信类型：</span>
        <el-radio-group v-model="options5">
          <el-radio label="3">挂机短信</el-radio>
          <el-radio label="4">群发短信</el-radio>
        </el-radio-group>
        <br> <br>
        <span>*请按照实际场景选择短信类型，选择了不合适的类型会导致短信发送异常</span>
        <br><br>

        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信签名：</span>
        <el-select  class="page" v-model="DLvalue1" placeholder="请选择">
          <el-option
              v-for="item in optionsDL2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>    <br><br>

        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">tplid：</span>
        <el-input v-model="moBanName3" style="width: 200px; margin-right: 10px" placeholder="请输入tplid名称"></el-input>
       <br><br>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信链接：</span>
        <el-input v-model="moBanNameLj" style="width: 200px; margin-right: 10px" placeholder="请输入短信链接名称"></el-input>
        <br><br>
        <span  class="container" style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">短信文案：</span>
        <el-input
            type="texarea"
            placeholder="请输入内容"
            v-model="texareaWa1"
            maxlength="200"
            show-word-limit
        ></el-input>
        <br>
        <el-button type="primary">添加变量</el-button>
        <div v-if="previewContent">
          <strong>预览:</strong>
          <div>{{ previewContent}}退订回T</div>
        </div>
          <div style="text-align: right;">
            <el-button @click="showForm = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>
      </el-dialog>
    </div>

      <el-table :data="DtjData" style="width: 100%; margin: 15px ">
        <el-table-column prop="fid" label="编号"></el-table-column>
        <el-table-column prop="fmblx" label="模板类型"></el-table-column>
        <el-table-column prop="fmbmc" label="模板名称"></el-table-column>
        <el-table-column prop="fqm" label="签名"></el-table-column>
        <el-table-column prop="fdxlx" label="短信类型"></el-table-column>
        <el-table-column prop="fnr" label="短信内容"></el-table-column>
        <el-table-column prop="fdl" label="短链任务ID"></el-table-column>
        <el-table-column prop="fzt" label="状态"></el-table-column>
        <el-table-column prop="fcjsj" label="创建时间" :formatter="row => new Date(row.fcjsj).toLocaleString()"></el-table-column>
        <el-table-column prop="address" label="最后发送时间"></el-table-column>
        <el-table-column prop="address" label="审核时间"></el-table-column>


      </el-table>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted, nextTick, computed} from 'vue';
import { ElMessage, ElButton, ElDialog ,ElInput } from "element-plus";
import axios from 'axios';
import request from "@/utils/request";

const texareaWa = ref('');
const texarea1 = ref('');
const moBanName = ref('');
const moBanName1 = ref('');
const moBanName2 = ref('');
const moBanName3 = ref('');
const moBanNameLj = ref('');

const showButtons = ref(false);
const showForm = ref(false);
const formType = ref('');
const DLvalue = ref('');
const DLvalue1 = ref('');
const isAddDialogVisible = ref(false);

const LXvalue = ref('');
const MBvalue = ref('');
const DRvalue = ref('');
const FSvalue = ref('');
const DXvalue = ref('');
const WHvalue = ref('');
const value1 = ref('');
const DtjData = ref([]);
const isVariableModalOpen = ref(false);
const searchTerm = ref('');
const variablesList = ref([]); // 初始化为一个空数组
const form1Visible = ref(false);
const form2Visible = ref(false);
const form3Visible = ref(false);
const toolTipContent = ref(null);
const queryFmbmc = ref('');
const texarea = ref('');
const selectedOption = ref('option1');
const selectedValue = ref('');
const queryFnr = ref('');
const textarea1 = ref(''); // Assuming you initialize it like this
const previewContent = ref(''); // Assuming you initialize it like this
// 这部分是与options相关的数据，都转化为ref
const optionsData = ref({
  option1: {
    inputPlaceholder: '请选择短信签名',
    selectOptions: [
      { value: '所有', label: '所有' },
      { value: '部分', label: '部分' }
    ]
  },
  option2: {
    inputPlaceholder: '请选择短信签名',
    selectOptions: [
      { value: '2-1', label: '所有' },
      { value: '2-2', label: '部分' }
    ]
  },
  option3: {
    inputPlaceholder: '请输入短信签名',
    selectOptions: []
  }
});

const options1 = ref([
  { value: 'ALL', label: '全部' }
]);

const options2 = ref([]);

const options3 = ref([
  { value: '0', label: '全部' },
  { value: '1', label: '待审核' },
  { value: '2', label: '审核中' },
  { value: '3', label: '审核不通过' },
  { value: '4', label: '可应用' }
]);

const options4 = ref([
  { value: '0', label: '全部' },
  { value: '1', label: '普通短信模板' },
  { value: '2', label: '智能短链模板' },
  { value: '3', label: '多媒体短信模板' }
]);

const options5 = ref([
  { value: '0', label: '全部' },
  { value: '1', label: '挂机短信' },
  { value: '2', label: '群发短信' },
  { value: '3', label: '第三方挂机短信' }
]);

// computed
const filteredVariables = computed(() => {
  if (searchTerm.value) {
    return variablesList.value.filter(item => item.includes(searchTerm.value));
  } else {
    return variablesList.value;
  }
});

const inputPlaceholder = computed(() => {
  return optionsData.value[selectedOption.value].inputPlaceholder;
});

const currentOptions = computed(() => {
  return optionsData.value[selectedOption.value].selectOptions;
});

// 该部分替换了created钩子函数
onMounted(() => {
  toolTipContent.value = createTooltipContent();
  fetchData();
});


const addShortLink = () => {
  textarea1.value += '{智能短链地址}';
  previewContent.value = textarea1.value;
};

const handleSubmit = async () => {
  try {
    let fdxlx = '';
    switch (selectedOption.value) {
      case 'option1':
        fdxlx = '1';
        break;
      case 'option2':
        fdxlx = '2';
        break;
      case 'option3':
        fdxlx = '3';
        break;
    }

    const tDxmbT = {
      fmbmc: moBanName.value,
      fdxlx,
      fqm: selectedValue.value,
      fnr: texarea.value,
    };

    await request.post('/dxmb/add',tDxmbT).then(res => {
      ElMessage.success('添加成功')
    })


    if (!response.data.success) {
      // 处理错误
    }
  } catch (error) {
    console.error('Error:', error);
  }
  showForm.value = false;
};


// 查
const fetchDataByFmbmc = async () => {
  try {
    let url = `/dxmb/selectByAll?fmbmc=${queryFmbmc.value}`;
    if (LXvalue.value && LXvalue.value !== "ALL") {
      url += `&fqm=${LXvalue.value}`;
    }
    if (queryFnr.value) {
      url += `&fnr=${queryFnr.value}`;
    }
    // ...[其他的查询参数]

    await request.get(url).then(res => {
      DtjData.value = res.data
    })


    // const response = await axios.get(url);
    // DtjData.value = response.data.data;
  } catch (error) {
    console.error('Error fetching data by Fmbmc:', error);
  }
};

const fetchData = () => {


  request.get('dxmb/getAll').then(res => {
    DtjData.value = res.data

  }).catch(error => {
    console.error('Error fetching data:', error);
  });

  // axios.get('http://localhost:9000/dxmb/getAll')
  //     .then(response => {
  //       DtjData.value = response.data.data;
  //     })
  //     .catch(error => {
  //       console.error('Error fetching data:', error);
  //     });
};

const objectToArray = (obj) => {
  return Object.values(obj);
};

const createTooltipContent = () => {
  return `<div style="display: flex; flex-direction: column;">
            <el-button type="link" @click="toggleFormVisibility('form1')">表单 1</el-button>
            <el-button type="link" @click="toggleFormVisibility('form2')">表单 2</el-button>
            <el-button type="link" @click="toggleFormVisibility('form3')">表单 3</el-button>
          </div>`;
};

const openForm = (type) => {
  formType.value = type;
  showForm.value = true;
};

// 如果你有其他函数，你可以继续在这里添加

</script>

<style>
/*.container {*/
/*  margin: 10px;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  gap: 20px;  !* 你可以根据需要调整这个值 *!*/
/*}*/
.tooltip-content {
  background-color: transparent !important;
  box-shadow: none !important;
}
.button-with-border{
  border: 1px solid #ccc;  /* 你可以根据需要调整边框颜色 */
  margin: 5px; /* 添加一些边距 */
}
</style>
